import React, { Component } from 'react';
import {  Footer, FooterTab, Button, Icon, Text } from 'native-base';

export default class Bottom extends Component {
    render() {
        const tabs = [
            {name:'汽车服务',navigate:'Home',icon:'apps'},
            {name:'找车位',navigate:'Find',icon:'ios-eye'},
            {name:'托管车位',navigate:'Trust',icon:'ios-navigate'},
            {name:'我的',navigate:'My',icon:'ios-person'},
        ];
        const { navigate }  = this.props.navigation;
        const { routeName } = this.props.navigation.state;
        
        return (
            <Footer>
                <FooterTab>
                    {tabs.map ((item) => {
                        return <Button key={item.name} 
                            vertical
                            active={routeName === item.navigate}  
                            onPress={() =>
                                navigate(item.navigate)
                            }>
                            <Icon active name={item.icon} />
                            <Text>{item.name}</Text>
                        </Button>
                    })}
                </FooterTab>
            </Footer>
        )
    }
}